<template>
  <div class="search">
    <div class="head">
      <div>
        <el-input
            size="mini"
            style="width: 200px; margin-right :10px; font-size:13px; "
            v-model="name"
            placeholder="请输入医院名字"
        ></el-input>
        <el-button size="mini" type="info" @click="paging(1)" plain>查询</el-button>
        <el-button size="mini" type="warning" @click="name = ''" plain>重置</el-button>
      </div>
      <el-button class="add" type="success" @click="add">添加医院</el-button>
    </div>
  </div>
  <div>
    <el-table
        :data="page.list"
        :row-style="{ height: '75px' }"
        style="width: 100%">
      <el-table-column
          prop="id"
          label="编号"
          width="100px"
      >
      </el-table-column>
      <el-table-column
          label="院徽"
          width="100px">
        <template v-slot="scope">
          <img :src="scope.row.icon" width="50">
        </template>
      </el-table-column>
      <el-table-column
          prop="name"
          label="医院名称"
          width="150px"
      >
      </el-table-column>
      <el-table-column
          prop="address"
          label="具体地址"
          width="300px">
      </el-table-column>
      <el-table-column
          label="医院级别"
          width="150px">
        <template v-slot="scope">
          <el-tag type="success">{{ scope.row.level.name }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          label="是否可以候补"
          width="150px">
        <template v-slot="scope">
          {{ scope.row.isAlternate == 1 ? "是" : "否" }}
        </template>
      </el-table-column>
      <el-table-column
          label="描述"
          width="150px">
        <template v-slot="scope">
          <el-button type="primary" @click="seeDesc(scope.row)">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column
          label="提示"
          width="150px"
      >
        <template v-slot="scope">
          <el-button type="primary" @click="seePrompt(scope.row)">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column
          label="导引"
          width="150px">
        <template v-slot="scope">
          <el-button type="primary" @click="seeGuidance(scope.row)">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column
          label="操作">
        <template v-slot="scope">
          <el-button type="info" @click="update(scope.row)">修改信息</el-button>
          <el-button type="danger" @click="del(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="paging"
        :current-page="page.pageNum"
        :page-size="page.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="page.total">
    </el-pagination>
  </div>
  <el-dialog title="查看描述" v-model="dialogFormVisible1">
    <el-input
        v-model="form.desc"
        style="width: 100%"
        :rows="20"
        type="textarea"
        placeholder="请输入医院的描述"
    />
    <div slot="footer" class="dialog-footer">
      <el-button @click="clear">返 回</el-button>
      <el-button type="primary" @click="saveNotMatch">保 存</el-button>
    </div>
  </el-dialog>
  <el-dialog title="查看提示" v-model="dialogFormVisible2">
    <el-input
        v-model="form.prompt"
        style="width: 100%"
        :rows="20"
        type="textarea"
        placeholder="请输入医院的提示"
    />
    <div slot="footer" class="dialog-footer">
      <el-button @click="clear">返 回</el-button>
      <el-button type="primary" @click="saveNotMatch">保 存</el-button>
    </div>
  </el-dialog>
  <el-dialog title="查看指引" v-model="dialogFormVisible3">
    <el-input
        v-model="form.guidance"
        style="width: 100%"
        :rows="20"
        type="textarea"
        placeholder="请输入医院的指引"
    />
    <div slot="footer" class="dialog-footer">
      <el-button @click="clear">返 回</el-button>
      <el-button type="primary" @click="saveNotMatch">保 存</el-button>
    </div>
  </el-dialog>
  <el-dialog v-model="delDialogVisible" title="提示" width="500" center>
    <span style="font-size: 15px">
      你确定要删除该医院吗
    </span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="delDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmDel()">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog v-model="forceDelDialogVisible" width="500" center>
    <template #header>
      <el-icon>
        <WarnTriangleFilled/>
      </el-icon>
      <span>警告</span>
    </template>
    <span style="font-size: 15px">
      该医院还有绑定的科室和诊所数据,是否强制删除并清空数据<span style="color: red">(注意:该操作需要谨慎执行)</span>
    </span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="clear">取消</el-button>
        <el-button type="primary" @click="confirmDelClinic()">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog :title="form.id == null ? '添加医院' : '修改医院'" v-model="formVisible" @close="clear">
    <el-form :model="form" :rules="rules" ref="userForm">
      <el-form-item label="医院名称" :label-width="formLabelWidth" prop="name">
        <el-input v-model="form.name" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="医院具体地址" :label-width="formLabelWidth" prop="address">
        <el-input style="width: 280px;margin-right: 15px" v-model="form.address" auto-complete="off"></el-input>
        经度:
        <el-input style="width: 150px;margin-right: 15px" v-model="form.x" auto-complete="off" readonly></el-input>
        纬度:
        <el-input style="width: 150px" v-model="form.y" auto-complete="off" readonly></el-input>
        <el-icon style="margin-left: 15px;cursor: pointer" size="20px" @click="showMap">
          <Location/>
        </el-icon>
      </el-form-item>
      <el-form-item label="医院级别" :label-width="formLabelWidth" prop="typeId">
        <el-select v-model="form.typeId" placeholder="请选择医院级别">
          <el-option v-for="item in levelList" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否可候补" :label-width="formLabelWidth" prop="isAlternate">
        <el-radio-group v-model="form.isAlternate">
          <el-radio :value="1" size="large" border>是</el-radio>
          <el-radio :value="0" size="large" border>否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="院徽" :label-width="formLabelWidth" prop="icon">
        <el-upload
            class="avatar-uploader"
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            :show-file-list="false"
            :on-change="handleChange"
            :before-upload="beforeAvatarUpload"
        >
          <img v-if="imgurl" :src="imgurl" class="avatar"/>
          <el-icon v-else class="avatar-uploader-icon">
            <Plus/>
          </el-icon>
        </el-upload>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="clear()">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </div>
  </el-dialog>
  <el-dialog
      title="位置"
      v-model="mapVisible"
      width="80%"
      v-if="mapVisible"
  >
    <MapContainer :x="form.x" :y="form.y" @fun="f"></MapContainer>
    <span slot="footer" class="dialog-footer">
      <el-button @click="mapVisible = false">取 消</el-button>
      <el-button type="primary" @click="saveClickInfo">保 存</el-button>
    </span>
  </el-dialog>

</template>

<script setup lang="ts">
//医院名字
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";

const name = ref('')
//分页查询,页面进入
const nowPage = ref(1)
const page = ref({})
const pageSize = ref(9)
const handleSizeChange = (val) => {
  pageSize.value = val
  paging(1)
}
const paging = (curPage) => {
  nowPage.value = curPage
  axios.get("/hospital/selByPage", {
    params: {
      curPage: curPage,
      pageSize: pageSize.value,
      name: name.value
    }
  }).then(res => {
    if (res.data.code == 200) {
      page.value = res.data.data
    } else {
      ElMessage.error(res.data.msg)
    }
  })
}
onMounted(() => {
  paging(1)
})
//描述的弹窗
const dialogFormVisible1 = ref(false)
const seeDesc = (hos) => {
  form.value = hos
  imgurl.value = hos.icon
  dialogFormVisible1.value = true
}
const dialogFormVisible2 = ref(false)
const seePrompt = (hos) => {
  form.value = hos
  imgurl.value = hos.icon
  dialogFormVisible2.value = true
}
const dialogFormVisible3 = ref(false)
const seeGuidance = (hos) => {
  form.value = hos
  imgurl.value = hos.icon
  dialogFormVisible3.value = true
}
const save = () => {
  userForm.value.validate(async (valid) => {
    if (!valid) {
      ElMessage.warning('请输入完整的信息')
    } else {
      saveNotMatch()
    }
    userForm.value.clearValidate();
  })
}
const saveNotMatch = ()=>{
  if (imgurl.value != '') {
    let formData = new FormData
    console.log(file.value)
    Object.keys(form.value).forEach(key => {
      console.log(key)
      formData.append(key, form.value[key])
    })
    formData.append("photo", file.value.raw)
    axios.post('hospital/save', formData).then(res => {
      if (res.data.code == 200) {
        ElMessage.success("保存成功")
        clear()
      } else {
        ElMessage.error(res.data.msg)
      }
    })
  } else {
    ElMessage.warning('请选择图片')
  }
}
const clear = () => {
  dialogFormVisible1.value = false
  dialogFormVisible2.value = false
  dialogFormVisible3.value = false
  delDialogVisible.value = false
  forceDelDialogVisible.value = false
  formVisible.value = false
  form.value = {}
  imgurl.value = ''
  paging(nowPage.value)
}
//添加表单
const userForm = ref()
const rules = ref(
    {
      name: [
        {required: true, message: '请输入姓名', trigger: "blur"},
      ],
      address: [
        {required: true, message: '请输入地址', trigger: "blur"},
      ],
      typeId: [
        {required: true, message: '请选择类型', trigger: "blur"},
      ],
      isAlternate: [
        {required: true, message: '请选择是否可候补', trigger: "blur"},
      ]
    }
)
const form = ref({})
const formLabelWidth = '200px'
const formVisible = ref(false)
const levelList = ref([])
const initLevel = () => {
  axios.get('hospitalLevel/getAll').then(res => {
    if (res.data.code == 200) {
      levelList.value = res.data.data
    }
  })
}
const add = () => {
  initLevel()
  formVisible.value = true
}
//修改
const update = (val) => {
  form.value = val
  initLevel()
  imgurl.value = val.icon
  formVisible.value = true
}
//文件上传相关内容
import {Plus} from '@element-plus/icons-vue'
import type {UploadProps} from 'element-plus'
import MapContainer from "@/views/admin/MapContainer.vue";

const imgurl = ref('')
const file = ref({})
const handleChange = (f) => {
  file.value = f
  imgurl.value = URL.createObjectURL(f.raw)
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('只能是jpg类型')
    return false
  }
  return true
}
//删除
const delDialogVisible = ref(false)
const delId = ref(0)
const del = (id) => {
  delId.value = id
  delDialogVisible.value = true
}
const forceDelDialogVisible = ref(false)
const confirmDel = () => {
  axios.get('hospital/delete', {params: {id: delId.value}}).then(res => {
    if (res.data.code == 200) {
      ElMessage.success('删除成功')
      clear()
    } else {
      ElMessage.error(res.data.msg)
      forceDelDialogVisible.value = true
    }
  })
}
const confirmDelClinic = () => {
  axios.get('hospital/forceDel', {params: {id: delId.value}}).then(res => {
    if (res.data.code == 200) {
      ElMessage.success('删除成功')
    } else {
      ElMessage.error(res.data.msg)
    }
    clear()
  })
}
//地图相关内容
const mapVisible = ref(false)
const showMap = () => {
  mapVisible.value = true
}
let clickInfo = {}
const f = (data) => {
  clickInfo.x = data.x
  clickInfo.y = data.y
}
const saveClickInfo = () => {
  form.value.x = clickInfo.x
  form.value.y = clickInfo.y
  mapVisible.value = false
}
</script>
<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

.add {
  margin-right: 50px;
}

.head {
  display: flex;
  justify-content: space-between;
}

.search {
  width: 100%;
  box-shadow: 1px 0 6px rgba(0, 21, 41, 0.25);
  border-radius: 5px;
  box-sizing: border-box;
  padding: 15px 0 15px 10px;
}

.el-pagination {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: center;
}

.dialog-footer {
  margin-top: 10px;
}
</style>